<template>
  <div>
    <tableComponents
      :pagination="{ currentPage, pageSize, total: list.all_num }"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @sendUserSearch="getSearch"
      :searchData="userSearchData"
      :isHaveExport="false"
      :isHaveAdd="false"
    >
      <template v-slot:headRight>
        <div class="fx head-right-icon">
          <p @click="getUnionBalance">
            <i class="el-icon-s-custom"></i>&nbsp;&nbsp;余额
          </p>
        </div>
      </template>
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="list.data"
          stripe
          v-loading="loading"
          header-row-class-name="head_color"
          tooltip-effect="dark"
          style="width: 99.8%"
        >
          <el-table-column label="余额明细ID" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>

          <el-table-column label="账户类型" min-width="80">
            <template slot-scope="scope">
              {{ scope.row.accountType == 1 ? "可用余额" : "锁定余额" }}
            </template>
          </el-table-column>
          <el-table-column label="金额" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.amount }}
            </template>
          </el-table-column>
          <el-table-column label="京东Pin" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.pin }}
            </template>
          </el-table-column>
          <el-table-column label="订单号" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.orderId }}
            </template>
          </el-table-column>
          <el-table-column label="业务类型" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.tradeTypeName }}
            </template>
          </el-table-column>
          <el-table-column label="余额变动日期" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.createdDate }}
            </template>
          </el-table-column>
          <el-table-column label="备注信息" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.notePub }}
            </template>
          </el-table-column>
          <el-table-column label="业务号" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.tradeNo }}
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>
    <el-dialog
      :append-to-body="true"
      :visible.sync="show_balance"
      width="600px"
    >
      <p v-if="balance.balance">账户余额：{{ balance.balance.remainLimit }}</p>
      <p v-if="balance.geious">
        金采的违约金金额：{{ balance.geious.penaltySumAmt }}
      </p>
      <p v-if="balance.geious">
        金采的总授信额度：{{ balance.geious.creditLimit }}
      </p>
      <p v-if="balance.geious">
        金采的待还款额度：{{ balance.geious.debtSumAmt }}
      </p>
      <p v-if="balance.geious">
        金采账户余额：{{ balance.geious.remainLimit }}
      </p>
    </el-dialog>
  </div>
</template>
<script>
import { jdPaySearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {
  data() {
    return {
      userSearchData: jdPaySearchData,
      loading: false,
      list: [],
      pageSize: 10,
      currentPage: 1,
      searchAll: {},
      balance: {},
      show_balance: false,
    };
  },
  components: {},
  methods: {
    getUnionBalance() {
      var params = {};
      this.$api.getStation.jingdong_getUnionBalance(params).then((res) => {
        if (res.data.code == 200) {
          this.balance = res.data.result;
          this.show_balance = true;
        }
      });
    },
    getSearch(obj) {
      this.searchAll = obj;
      this.getNewsAll(obj);
    },
    getNewsAll(data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;
      this.$api.getStation.jingdong_getBalanceDetail(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },
  },
  created() {
    this.getNewsAll();
  },
};
</script>

<style lang="less" scoped>
.tjCon {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 20px;
}

.tjCon > p {
  color: #606266;
  padding: 10px 10px;
  font-size: 14px;
  width: 25%;
  text-align: left;
}
</style>
